<template>
  <div class="about">
    <div class="about-search">
            <div class="about-search-back">
                <router-link to="/">
                  <img src="/public/back.jpeg" alt="" class="back-logo">
                </router-link>
                <el-input v-model="input" placeholder="分享我的余光" class="login-header-searchbox1"></el-input>
            </div>
     </div>
     <div class="about-main">
      <div class="about-main-floor">
        <div class="about-main-floor-user">
          <img src="/src/assets/touxiang1.jpg" alt="" class="yilou-touxiang">
          <p>蜡笔小新</p>
        </div>
        <div class="about-main-floor-share">
          <router-link to="/home">
            <p>如果你需要鼓励的话，我会对你说，加油</p>
          </router-link>
        </div>
        <div class="about-main-floor-zanping">
          <img src="/src/assets/点赞.png" alt="" class="youxia">
          <img src="/src/assets/liaotiankuang.png" alt="" class="youxia">
        </div>
      </div>
      <div class="about-main-floor">
        <div class="about-main-floor-user">
          <img src="/src/assets/touxiang2.jpeg" alt="" class="yilou-touxiang">
          <p>一小支</p>
        </div>
        <div class="about-main-floor-share">
          <img src="" alt="">
        </div>
        <div class="about-main-floor-zanping">
          <img src="/src/assets/点赞.png" alt="" class="youxia">
          <img src="/src/assets/liaotiankuang.png" alt="" class="youxia">
        </div>
      </div>
      <div class="about-main-floor">
        <div class="about-main-floor-user">
          <img src="/src/assets/touxiang3.jpg" alt="" class="yilou-touxiang">
          <p>一生平安</p>
        </div>
        <div class="about-main-floor-share">
          <img src="" alt="">
        </div>
        <div class="about-main-floor-zanping">
          <img src="/src/assets/点赞.png" alt="" class="youxia">
          <img src="/src/assets/liaotiankuang.png" alt="" class="youxia">
        </div>
      </div>
     </div>
  </div>
</template>

<style scoped>
.about {
    height: 80vh;
    width: 40vh;
    display:flex;
     align-items: center;
     flex-direction: column;
    justify-content: center;
    background-color:white;
    border: 1px solid black;
  }
  .about-search-back{
    height:6vh;
    width:36vh;
    position: absolute;
    top: 11vh;
    left: 3vh;
    display: flex;
    justify-content: space-around;
  }
  .back-logo{
    height:6vh;
    width:8vh;
  }
  .about-main{
    /* 开启Flexbox布局 */
  display: flex;
  /* 让子元素垂直排列 */
  flex-direction: column;
  }
  .about-main-floor{
    width: 40vh;
    flex: 1;
  border: 2px solid #ccc;
  margin: 2px;
  }
  .about-main-floor-user{
    text-align: left;
    display: flex;
  }
  .about-main-floor-user img{
  max-width: 100%; /* 确保图片不超出容器宽度 */
  }
  .about-main-floor-user p{
    margin: 0;
  }
  .yilou-touxiang{
    height: 6vh;
    width: 8vh;
    border-radius: 50%;
  }
  .about-main-floor-zanping{
    height: 5vh;
    width: 39vh;
    text-align: right;
  
  gap: 8px; /* 图标之间的间距 */
  }
  .youxia{
    height: 4vh;
    width: 4vh;
  }
</style>
<script>

</script>